<template>
 <view>
   <!-- 1 搜索框开始 -->
        <YgSearch></YgSearch>
   <!-- 1 搜索框结束 -->
   <!-- 2 轮播图 开始 -->
   <!-- 
     设置轮播图标签的高 等于 图片标签的高 (图片 高 等比例 宽度变化)
     1 比例公式
     原图片的宽度 （750）/ 原图片的高度 （340） = 拉伸后的图片的宽 （100vw 或者 750rpx）/ 拉伸后的图片的高（340rpx）
    -->
   <u-swiper :list="swiperdata" height="340"></u-swiper>
   <!-- 2 轮播图 结束 -->
<!-- 3 导航栏 开始 -->
<view class="catitems u-flex">
  <navigator class="u-flex-1 u-padding-15" v-for="item in catitems" :key="item.name">
    	<u-image width="100%"  mode="widthFix"  :src="item.image_src"></u-image>
  </navigator>
</view>
<!-- 3 导航栏 结束 -->
<!-- 4 楼层数据 开始 -->
<view class="floordata" v-for="(item1,index1) in floordata" :key="index1">
  <view class="floordata-group">
  <view class="floordata-group-title">
    	<u-image width="100%"  mode="widthFix"  :src="item1.floor_title.image_src"></u-image>
  </view>
  <view class="floordata-group-list">
    <!-- 注意第二层循环的是谁 -->
    <view class="floordata-item" v-for="(item2,index2) in item1.product_list" :key="item2.name">
      	<image width="100%" v-if="index2===0" mode="widthFix"  :src="item2.image_src"></image>
      	<image width="100%" v-else :src="item2.image_src"></image>
    </view>
  </view>
</view> 
 </view>
<!-- 4 楼层数据 结束 -->
 </view>
</template>
<script>
export default {
  data(){
    return{
      // 轮播图数据
      swiperdata:[],
      // 导航栏数据
      catitems:[],
      // 楼层数据
      floordata:[]
    }
  },
  //  小程序 onLoad
  async onLoad(){
this.getHomeSwiperData()
this.getHomeCatitems()
this.getHomeFloordata()
  },
  methods:{
    /**
     * 轮播图数据
     */
    async getHomeSwiperData(){
const res=await this.$u.api.getHomeSwiperData()
//  console.log(res);
this.swiperdata=res.message.map((v)=>({
  ...v,
  image:v.image_src
}))
    },
    /**
     * 导航栏
     */
    async getHomeCatitems(){
const res=await this.$u.api.getHomeCatitems()
this.catitems=res.message
    },
    /**
     * 楼层数据
     */
    async getHomeFloordata(){
const res=await this.$u.api.getHomeFloordata()
console.log(res);
this.floordata=res.message
    }
  }
};
</script>

<style lang="scss" >
.floordata {
  .floordata-group {
    .floordata-group-title {
    }

    .floordata-group-list {
      .floordata-item {
        float: left;
        width: 33.33%;
        image {
          width: 100%;
        }

        // 前四张
        // &:nth-child(-n+4){
        &:nth-last-child(-n + 4) {
          // 后四张
          image {
            // rpx 单位   设计稿     假设设计稿的宽度 375px
            // 1px = 2rpx
            height: 208rpx;
            // 图片自带3px间隙  
            vertical-align: middle;
          }
        }
      }
    }
  }
}
</style>